import React, { useState, useEffect, useRef } from 'react'
import { connect } from 'react-redux'
import { requestChartForSales } from '../../../api/statistic'
import QueueAnim from 'rc-queue-anim'
import * as echarts from 'echarts'

let areaStyle = {
    opacity: 0.8,
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {
            offset: 0,
            color: 'rgb(0, 221, 255)'
        },
        {
            offset: 1,
            color: 'rgb(77, 119, 255)'
        }
    ])
}

function Sale (props) {
    const [chart, setchart] = useState()
    const init = useRef(false)

    useEffect(() => {
        function chartRender (config) {
            const chartDom = document.getElementById('main')
            if (!init.current) {
                chartDom && setchart(echarts.init(chartDom))
                init.current = true
            }
            chart && chart.clear()
            chart && chart.setOption(config)
        }

        requestChartForSales().then(res => {
            res.data.series[0].areaStyle = areaStyle
            chartRender(res.data)
        })
    }, [chart, init])

    return (<QueueAnim className="demo-content" key="demo">
        {
            props.show ? <div className="demo-tbody" key="a" style={{ position: 'relative' }}>
                <div id="main"
                     style={{ height: window.innerHeight - 400, paddingTop: '20px', boxSizing: 'border-box' }}>

                </div>
                <div style={{ position: 'absolute', top: 30, left: 30, zIndex: 10 }}>近期订单情况</div>
            </div> : null
        }
    </QueueAnim>)
}

export default connect((state) => {
    return {
        show: state.getIn(['fade', 'show'])
    }
})(Sale)
